<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>房间信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../css/font.css">
    <link rel="stylesheet" href="../../css/xadmin.css">
    <script type="text/javascript" src="../../js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../js/xadmin.js"></script>
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="../welcome.html">首页</a>
        <a href="building-room.html">房间信息</a>
      </span>
    </div>
    <div class="x-body">
      <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so"  method="post" >
          <input type="text" id="keyword" name="keyword"  placeholder="搜索" autocomplete="off" class="layui-input">
          <button class="layui-btn" id="NewsSearch" ><i class="layui-icon">&#xe615;</i></button>
      		<a class="layui-btn layui-btn-small" style="line-height:2.5em;" href="javascript:location.replace(location.href);" title="刷新">
        		<i class="layui-icon" style="line-height:30px">ဂ</i></a>
        </form>
        
      </div>
      <xblock>
        <button class="layui-btn layui-btn-danger" id="delAll"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="BoxShow('添加房间','./building-room-add.html')"><i class="layui-icon"></i>添加房间</button>
        <span class="x-right" style="line-height:40px">共有数据：<span id="listnum"></span>条</span>
      </xblock>
      <table class="layui-table">
        <thead>
          <tr>
            <th>
              <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
            </th>
            <th>房间ID</th>
            <th>所在楼层</th>
            <th>房间名称</th>
            <th>所属大楼</th>
            <th>所属小区</th>
            <th>业主姓名</th>
            <th >操作</th>
            </tr>
        </thead>
        <tbody id="showrooms">
          
        </tbody>
      </table>
      <div class="layui-table" id="page">
        
      </div>

    </div>
	<script>
        
        layui.use(['laytpl','laypage','form','laydate'], function(){
        	
        	var laypage = layui.laypage;
            var form = layui.form;
            var laydate = layui.laydate;

            //第一次页面加载执行查询所有数据
        	$(function(){
        		showRooms();
        	});
        	
        	//按照条件查询的表单提交
        	form.on("submit()",function(data){
        		
        	    var keyword = $("#keyword").val();
        	    var jsondata={};
            	if(keyword!=""){
            		jsondata.keyword=keyword;
            	};
        	    
        	    showRooms(jsondata);
        		return false;
        	});
        	
        	
        	

        //渲染，分页的函数
        function showRooms(jsondata){
        	
        	console.log(jsondata);
        	
     	   $.ajax({
 	    		type: "post",
 	    		url: "../../Information/showroom",
 	    		async: true,
 	    		data:jsondata,
 	    		dataType:'json',
 	    		success: function(map) {
 	    	//		var arrId = [];//装id
 	    			document.getElementById("listnum").innerHTML=map.size;
 	    			
 	    			//分页
 	    			laypage.render({
 	    	    	    elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
 	    	    	    ,count: map.size //数据总数，从服务端得到
 	    	    	    ,limit: 10
 	    	    	    ,skip: true //开启跳页
 	    	    	    ,jump: function(obj, first){
 	    	    	    	      //模拟渲染
 	    	    	    	      document.getElementById("showrooms").innerHTML = function(){
 	    	    	    	    	
 	    	    	    	        var arr = []
 	    	    	    	        ,thisData = map.listroom.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
 	    	    	    	        layui.each(thisData, function(index, item){
 	    	    	    	        	//前端数据显示的调整
 	    	    	    	        	if(item.userName==null){
											item.userName="";
										}
										//数据模板的渲染
 	    	    	    	        	var getTpl = document.getElementById("tplrooms").innerHTML;
 	    	    	    	        	arr.push(layui.laytpl(getTpl).render(item));
 	    	    	    	        });
 	    	    	    	         return arr.join(''); 
 	    	    	    	      }();
 	    	    	    	    

 	    					$(".selectuser").bind("click",function(){
 	    						var userId=this.parentNode.getAttribute("data-id");
 	    						
 	    						if(userId!="null"){
 	    							BoxShow('业主个人信息','../member/member-detail.html?id='+userId);
 	    						}else{
 	    							layer.alert("该设施还没绑定用户", {icon: 5,time:1500});
 	    						}
 	    					});

 	    		
 	    			        //为删除单个数据项功能的事件绑定
 	    			        $(".delRoom").bind("click",function(){
 	    			        	var id =this.parentNode.getAttribute("data-id");
                                 layer.confirm('确认要删除吗？',function(index){
                                        //发异步删除数据
                                 	 $.ajax({
                                          type:"post",
                                          url:"../../Information/deleteroom",
                                          async:true,
                                          data:{"id":id},//自己改id
                                          dataType:"json",
                                          success:function(result){
                                              if(result.msg=="success"){
                                            	  console.log(id);
                                                  $("#tr"+id).remove();
                                                  layer.msg('已删除!',{icon:1,time:1500},function(){
                                                  	location.reload();
                                                  });
                                              }else{
                                                  layer.alert("删除失败", {icon: 6,time:1500});
                                              }
                                          },
                                          error:function(){
                                              layer.alert("数据异常", {icon: 2,time:1500});
                                          }
                                      });
                                 }); 
                             });
 	    			        
 	    			        //为修改数据项功能的事件绑定
 	    			       $(".update").bind("click",function(){
 	    			    	  var RoomID=this.parentNode.getAttribute("data-id");
 	    			    	  BoxShow('修改新闻','./building-room-update.html?id='+RoomID);
 	    			       });
 	    			        
 	    		       
 						//解决layui复选框checkbox通过数据模板渲染后功能丢失的bug解决方案
 						$(".checkbox-render").bind('click',function(){
 							if($(this).hasClass("layui-form-checked")){
 								$(this).removeClass("layui-form-checked");
 							}else{
 								$(this).addClass("layui-form-checked");
 							}
 						}); 
 						
 	    	    	   }
	    	    	    });
 							
 						//为批量删除功能的事件绑定
 						$("#delAll").bind("click",function(){
 							 var data = tableCheck.getData();
 							 console.log(JSON.stringify(data));
 							 var data1=[];
 							 $.each(data,function(index,item){
 								 data1.push({'name':"id",'value':item});
 							 })
 							 console.log(JSON.stringify(data1));
 					        layer.confirm('确认要删除['+data+']吗？',function(index){
 					            //捉到所有被选中的，发异步进行删除
 					            
 					            $.ajax({
						      		type:"post",
						      		url:"../../Information/deleteAllrooms",
						      		async:true,
						      		
						      		data:data1,
						      		success:function(data){
						      			if(result.msg=="success"){
                                      	  console.log(id);
                                            $("#tr"+id).remove();
                                            layer.msg('已删除!',{icon:1,time:1500},function(){
                                            	location.reload();
                                            });   
                                        }else{
                                            layer.alert("删除失败", {icon: 6,time:1500});
                                        }
						      		},
						      		error:function(){
						      			layer.alert("操作异常", {icon: 6,time:1500});
						      		}
						      		
						      	});
 					            $(".layui-form-checked").not('.header').parents('tr').remove();
 					        });
 						});
 	    		},
 	    		error: function() {
 	    			layer.alert("数据异常", {icon: 2,time:1500});
 	    		}
 	    	});
        }
  });
        
        //二级窗体创建
        function BoxShow(title,url,w,h){
        	if (title == null || title == '') {
                title=false;
            };
            if (url == null || url == '' || url == undefined) {
                url="404.html";
            };
            if (w == null || w == '' || w == undefined) {
                w=($(window).width()*0.9);
            };
            if (h == null || h == '' || h == undefined) {
                h=($(window).height() - 50);
            };
            layer.open({
                type: 2,
                area: [w+'px', h +'px'],
                fix: false, //不固定
                maxmin: true,
                shadeClose: true,
                shade:0.4,
                title: title,
                content: url
            });
        }
        
        
    </script>

  </body>
  
  <script id="tplrooms" type="text/html">
 
    <tr id="tr{{ d.roomId }}">
    <td>
      <div class="layui-unselect layui-form-checkbox checkbox-render" lay-skin="primary" data-id='{{ d.roomId }}'><i class="layui-icon">&#xe605;</i></div>
    </td>
    <td>{{ d.roomId }}</td>
    <td>{{ d.floor }}</td>
    <td>{{ d.roomName }}</td>
    <td>{{ d.buildingName }}</td>
    <td>{{ d.villageName }}</td>
    <td data-id='{{ d.userId }}'>
    	<a title="业主信息" class="selectuser"  href="javascript:;" >
    		<i class="layui-icon">&#xe66f;</i>
  		</a>
    	<span>{{ d.userName }}</span>
    </td>
    <td class="td-manage" data-id='{{ d.roomId }}'>
      <a title="修改" class="update"  href="javascript:;" >
        <i class="layui-icon">&#xe642;</i>
      </a>
      <a title="删除" class="delRoom"  href="javascript:;" >
        <i class="layui-icon">&#xe640;</i>
      </a>
    </td>
  </tr>
    </script>

</html>